<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料</title>
    <link rel="stylesheet" href="./css/base.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<style>
    html,
    body {
        background: #F6F6F6;
        height: 100%;
        width: 100%;
        margin: 0;
    }

    .personal-box {
        position: relative;
        /* background: aqua; */
        top: 10rem;
        width: 100%;
        padding: 1.5rem;
        background: #fff;
        border-radius: 25px;
    }

    .input-type {
        font-size: 1rem;
        border-bottom: 1px #ddd solid;
        padding: 13px 0px;
        display: flex;
        justify-content: space-between;
    }

    .input-type input {
        border: none;
        margin-left: 2rem;
        font-size: 1rem;
    }

    .s {
        display: flex;
    }

    .btn-submit {
        background-color: #169bd4;
        width: 85%;
        border: none;
        padding: 10px;
        color: #fff;
        font-size: 15px;
        display: block;
        margin: 25px auto;
        border-radius: 7px;
    }

    #pic {
        width: 5rem;
        height: 5rem;
        border-radius: 50%;
    }
</style>

<body>
    <div class="container">
        <div class="personal-box">
            <form action="www.baidu.com">
                <div class="item-input">
                    <div class="input-type s">头像
                        <img id="pic" src="./image/t1.png">
                        <input id="upload" name="file" accept="image/*" type="file" style="display: none"></div>
                    <div class="input-type">性别<input id="sex" type="text" name="sex" value="男" placeholder="" /></div>
                    <div class="input-type">生日<input id="birthday" type="text" name="birthday" value=""
                            placeholder="请选择" /></div>
                    <div class="input-type">邮箱<input type="text" name="email" value="" placeholder="请输入" />
                    </div>
                </div>
                <div class="item-submit">
                    <button class="btn-submit" type="submit">保存</button>
                </div>
            </form>
        </div>

    </div>

</body>
<script src="./js/picker.min.js"></script>
<script src="datePicker.js"></script>
<script src="./js/datePicker.js"></script>
<script>
    //性别选择
    var nameEl = document.getElementById('sex');
    var data1 = [
        {
            text: '男',
            value: 1
        }, {
            text: '女',
            value: 2
        }
    ];
    var picker = new Picker({
        data: [data1],
        selectedIndex: [0],
        title: '请选择'
    });
    picker.on('picker.select', function (selectedVal, selectedIndex) {
        nameEl.value = data1[selectedIndex[0]].text;
    })
    nameEl.addEventListener('click', function () {
        picker.show();
    });
    //生日选择
    var calendar = new datePicker();
    calendar.init({
        'trigger': '#birthday', /*按钮选择器，用于触发弹出插件*/
        'type': 'date', /*模式：date日期；datetime日期时间；time时间；ym年月；*/
        'minDate': '1900-1-1', /*最小日期*/
        'maxDate': '2100-12-31', /*最大日期*/
        'onSubmit': function () { /*确认时触发事件*/
            var theSelectData = calendar.value;
        },
        'onClose': function () { /*取消时触发事件*/
        }
    });
    $(function () {
        $("#pic").click(function () {
            $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
            $("#upload").on("change", function () {
                var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
                if (objUrl) {
                    $("#pic").attr("src", objUrl); //将图片路径存入src中，显示出图片
                    upimg();
                }
            });
        });
    });

    //建立一?可存取到?file的url
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
    //上传头像到服务器
    function upimg() {
        console.log(344)
        var pic = $('#upload')[0].files[0];
        var file = new FormData();
        file.append('image', pic);
        $.ajax({
            url: "/uploadImg",
            type: "post",
            data: file,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                console.log(data);
                var res = data;
                $("#resimg").append("<img src='/" + res + "'>")
            }
        });
    }   
</script>

</html>